<template>
  <el-select class="gl-select"
             @change="changeCallback"
             :clearable="clearable"
             :placeholder="placeholder"
             v-model="value">
    <el-option v-for="(item, i) in options"
               class="gl-option"
               :key="i"
               :label="item[labelKey]"
               :value="item[valueKey]">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "GlSelect",
    props: {
      options: {
        type: Array,
        default() {
          return []
        },
      },
      labelKey: {
        type: String,
        default: 'name',
      },
      valueKey: {
        type: String,
        default: 'id',
      },
      clearable: {
        type: Boolean,
        default: false,
      },
      value: {
        default: '',
      },
      placeholder: {
        type: String,
        default: '',
      },
    },
    methods: {
      changeCallback(val) {
        this.$emit('input', val); // 双向绑定value
        this.$emit('change', val);
      },
    },
  }
</script>

<style scoped lang="less">
  .gl-select {
    & + .gl-select {
      margin-left: 20px;
    }
  }
</style>
